<template>
  <div class="table-data">
    <!-- <div class="search-box">
      <el-input size="small" v-model="searchMap.model" placeholder="渠道名称"></el-input>
       <el-date-picker
        v-model="dateTime"
        type="datetimerange"
        value-format="yyyy-MM-dd hh:mm:ss"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <el-button size="small" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
    </div> -->
    <el-table :data="tableData" ref="multipleTable" :header-cell-style="headClass"  style="width:100%" :height="tHeight" class="table-box">
      <el-table-column label="流水号" prop="id"></el-table-column>
      <el-table-column v-if="manage=='admin'" label="渠道名称" prop="name"></el-table-column>
      <el-table-column label="类型" prop="type_txt"></el-table-column>
      <!-- <el-table-column label="渠道商联系人" prop="link_name"></el-table-column>
      <el-table-column label="联系电话" prop="phone"></el-table-column>
      <el-table-column label="冻结金额" prop="freeze"></el-table-column> -->
      <!-- <el-table-column v-if="manage=='admin'" label="渠道名" prop="name"></el-table-column> -->
      <el-table-column label="金额" prop="amount"></el-table-column>
      <!-- <el-table-column label="核销码">
        <template slot-scope="scope">
          <span>{{scope.row.goods_info.code}}</span>
        </template>
      </el-table-column>
      <el-table-column label="所属商品" prop="icon">
        <template slot-scope="scope" v-if="scope.row.gtv_id && scope.row.gt_id"> 
          <el-image
          style="width: 50px; height: 50px"
          :src="scope.row.goods_info.goods_cover"></el-image>
          <span>{{scope.row.goods_info.goods_name}}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="时间" prop="created_at"></el-table-column>
      <el-table-column label="操作人" v-if="manage=='admin'" prop="admin_name"></el-table-column>
      <el-table-column label="备注" prop="remark"></el-table-column>
      <el-table-column label="操作" >
          <template slot-scope="scope">
            <el-button v-if="scope.row.order_id" @click="detail(scope.row.order_id)" size="mini" type="primary">明细</el-button>
            <el-button v-if="scope.row.refund_id" @click="handleRemove(1,scope.row)" size="mini" type="primary">退款详情</el-button>
          </template>
      </el-table-column>
    </el-table>
    <div class="pages" ref="page-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10,30,50]"
        :page-size="size"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
      ></el-pagination>
    </div>
    <el-dialog title="详情" :visible.sync="dialogVisible" wdith="500px">
       <el-table :data="detailData" style="width:100%">
          <el-table-column label="明细" >
            <template slot-scope="scope">
                <el-image v-if="scope.row.image" 
              style="width: 50px; height: 50px"
              :src="scope.row.image"></el-image>
              <p>{{scope.row.title}}</p>
          </template>
          </el-table-column>
          <el-table-column label="规格" prop="spec"></el-table-column>
          <el-table-column label="数量" prop="num"></el-table-column>
          <el-table-column label="金额" prop="price"></el-table-column>
       </el-table>  
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Provide } from "vue-property-decorator";
import storageApi from "@/api/storage";
import orderApi from "@/api/order";
// import { State, Getter, Mutation, Action } from "vuex-class";
@Component({ components: {} })
export default class SecurityDetail extends Vue {
  // @Getter("user") getUser: any;
  @Provide() dateTime: any = ["",""]; // 时间
  @Provide() tHeight: number = document.body.offsetHeight - 323;
  @Provide() tableData: any = []; // 表格数据
  @Provide() multipleTable: any = []; // 表格数据
  @Provide() page: number = 1; // 当前page
  @Provide() size: number = 10; // 请求数据的个数 默认5
  @Provide() total: number = 0; // 总数据条数
  @Provide() orderId: number = 0; // 订单id
  @Provide() detailData: any = [] //订单商品价格详情
  @Provide() state: boolean = false; // 黑白名单状态
  @Provide() dialogVisible: boolean = false; //详情
  @Provide() mch_id: any = ''; // 渠道商id
  @Provide() datas:any={}
  @Provide() searchMap:{
    id: any,
    model: string,
    dayTime:number
  }={
    id: "",
    model: "",
    dayTime:0
  }
  @Provide() manage: any = '';//管理员
  created() {
    this.loadData();
    // 判断管理员权限
    let manage:any=localStorage.getItem('manage')
    this.manage=JSON.parse(manage).type
  }
 
  loadData() {
     storageApi.storageDetail(this.page,this.size,this.$route.query.id)
    .then((res: any) => {
        this.tableData = res.data.data.data;
        this.total = res.data.data.total;
    })
  }
  handleSizeChange(val: number): void {
    this.size = val;
    this.page = 1;
    this.loadData();
  }
  handleCurrentChange(val: number): void {
    this.page = val;
    this.loadData();
  }
  handleSearch(): void {
    // 点击搜索
    this.loadData();
    this.page = 1;
  }
  detail(val: any): void{
      this.dialogVisible = true;
      orderApi.getOrderItemByStored(val).then((res: any) => {
          if(res.data.code === 0){
            this.$message.error(res.data.msg);
            return false;
          }

          this.detailData = res.data.data
      })
  }
}
</script>

<style lang="scss" scoped>
.table-data {
  .user-info-item {
    width: 100%;
    display: flex;
    padding: 10px 0;
    span {
      display: inline-block;
    }
    span:first-of-type {
      width: 150px;
      text-align: right;
    }
    span:last-of-type {
      padding-left: 15px;
    }
  }
}
.sub{
  text-align: center;
  margin: 50px 0;
}
</style>
